﻿<!DOCTYPE html>
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html>
<head>
	<title>CKEditor Skin Tuner</title>
	<link rel="stylesheet" href="tuner.css" >
	<script src="../../ckeditor.js"></script>
	<script src="tuner.js"></script>
	<style>

		.float
		{
			float:left;
			margin:10px;
		}

		fieldset
		{
			border: 2px dashed #d3d3d3;
			border-radius: 5px;
			float:left;
			margin:10px;
			padding:15px;
		}

	</style>
	<script>

window.onload = function() {

	// $.themed/inline( 'container id', {editor config} );
	$.themed( 'fullThemed', { language: 'en', toolbarCanCollapse: true } );

	$.themed( 'fullThemedRTL', { language: 'he', toolbarCanCollapse: true } );

	$.themed( 'basicThemed', { language: 'en', removePlugins: 'elementspath,resize', height: 50,
		toolbar: [[ 'Source', '-', 'Bold', 'Italic', 'Underline' ]]
	});

	$.themed( 'basicThemedRTL', { language: 'he', removePlugins: 'elementspath,resize', height:50,
		toolbar : [[ 'Source', '-', 'Bold', 'Italic', 'Underline' ]]
	});

	$.inline( 'fullInline', { language: 'en',
		toolbar: [
			[ 'Source', '-', 'Bold', 'Italic', 'Underline' ],
			[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent' ],
			'/',
			[ 'Styles', 'About' ]
		]
	});

	$.inline( 'fullInlineRTL', { language: 'he',
		toolbar: [
			[ 'Source', '-', 'Bold', 'Italic', 'Underline' ],
			[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent' ],
			'/',
			[ 'Styles', 'About' ]
		]
	});

	// $.dialog( 'container id', 'dialog name', 'tab name', {editor config} );
	$.dialog( 'linkDialog', 'link', { language: 'en', extraPlugins: 'link' } );
	$.dialog( 'linkDialogAdvTab', 'link', 'advanced', { language: 'en', extraPlugins: 'link' } );
	$.dialog( 'linkDialogRTL', 'link', { language: 'he', extraPlugins: 'link' } );
	$.dialog( 'linkDialogRTLAdvTab', 'link', 'advanced', { language: 'he', extraPlugins: 'link' } );


	var items = 'link(on),unlink(disabled),table,tabledelete,tablecell';

	// $.menu( 'container id', 'menu item1, menu item1, ...', {editor config} );
	$.menu( 'contextMenu', items, { language: 'en' } );
	$.menu( 'contextMenuRTL', items, { language: 'he' } );

	// $.combo( 'container id', 'combo name', 'selected item', {editor config} );
	$.combo( 'stylesCombo', 'Styles', 'Red Title', { language: 'en' } );
	$.combo( 'stylesComboRTL', 'Styles', 'Red Title', { language: 'he' } );
	$.combo( 'formatCombo', 'Format', 'h3', { language: 'en' } );
	$.combo( 'formatComboRTL', 'Format', 'h3', { language: 'he' } );

};

	</script>
</head>
<body>
	<div>
		<fieldset>
			<legend>Themed</legend>
			<div id="fullThemed" class="float" style="width:850px;"><label>Full editor</label></div>
			<div id="fullThemedRTL" class="float" style="width:850px;"><label>Full editor in Hebrew (RTL)</label></div>
			<div id="basicThemed" class="float" style="width:440px;"><label>Basic editor</label></div>
			<div id="basicThemedRTL" class="float" style="width:440px;"><label>Basic editor in Hebrew (RTL)</label></div>
		</fieldset>
		<fieldset>
			<legend>Inline</legend>
			<br style="clear:both;">
			<div id="fullInline" class="float" style="width:440px;"><label>Inline floating toolbar</label></div>
			<div id="fullInlineRTL" class="float" style="width:440px;"><label>Inline floating toolbar in Hebrew (RTL)</label></div>
		</fieldset>
		<br style="clear:both;">
		<fieldset>
			<legend>Dialogs</legend>
			<div id="linkDialog" class="float"><label>Link Dialog </label></div>
			<div id="linkDialogAdvTab" class="float"><label>Link Dialog - Advanced Tab</label></div>
			<br style="clear:both;">
			<div id="linkDialogRTL" class="float"><label>Link Dialog in Hebrew (RTL)</label></div>
			<div id="linkDialogRTLAdvTab" class="float"><label>Link Dialog in Hebrew (RTL) - Advanced Tab</label></div>
			<br style="clear:both;">
		</fieldset>
		<fieldset>
			<legend>Menu and Combo</legend>
			<div id="contextMenu" class="float"><label>Context Menu</label></div>
			<div id="contextMenuRTL" class="float"><label>Context Menu in Hebrew (RTL)</label></div>
			<br style="clear:both;">
			<div id="stylesCombo" class="float"><label>Styles Combo</label></div>
			<div id="stylesComboRTL" class="float"><label>Styles Combo - in Hebrew (RTL)</label></div>
			<div id="formatCombo" class="float"><label>Styles Combo - in Hebrew (RTL)</label></div>
			<div id="formatComboRTL" class="float"><label>Styles Combo - in Hebrew (RTL)</label></div>
		</fieldset>
	</div>
</body>
</html>
